<!DOCTYPE html>
<html>
<head>
<title>渲染函数</title>
<script src="./vue.js"></script>
<style>
</style>
</head>
<body>
	<h1>文档地址 https://cn.vuejs.org/v2/guide/render-function.html</h1>
	<div id="app">
	  <h1>{{message}}</h1>  
	  <hr/>
	  <comp1></comp1>
	  <hr/>
	  <comp2></comp2>
	   <hr/>
	  <comp3 myid="myidValue"></comp3>
	   <hr/>
	</div>
	<script>
	//vue.js 在 if (Array.isArray(data) 查找 createElement 函数
	
	    /*
	    <h1>
	        aaaabbbb
	        <h2>h2</h2>
	    </h1>
	    */
	    //第二个参数是数组
	    const comp1Config={
	            render: function (h) {
	                console.log(h);
	                let hObj=  h(
	                  "h1",
	                  [  "aaaa"   
	                    ,"bbbb"
	                    , h('h2',"h2")
	                  ]
	                )
	                console.log(hObj);
	                return hObj;
	            }
	    }
	    
	    /*
	    <h1 id="id_h1">
           aaaabbbb
           <h2>h2</h2>
        </h1>
	    */
	    //第二个参数是对象
	    const comp2Config={
                render: function (h) {
                    console.log(h);
                    let hObj= h(
                      "h1",
                      {
                            attrs: {
                              id: 'id_h1'
                            } 
                      }
                      
                      ,[  "aaaa"
                        ,"bbbb"
                        , h('h2',"h2")
                      ]
                      
                    )
                    console.log(hObj);
                    return hObj;
                    
                }
        }
	    
	    /*
	    <h1 id="myidValue" style="color: red;">
	      333
	      4444
	      <br>
	      <button type="button">测试按钮</button>
	   </h1>
	    
	    
	    */
	    //props
	    const comp3Config={
	             props:["myid"]    //传值 <comp3 myid="myidValue"></comp3>
                ,render: function (h) {
                    console.log(h);
                    let hObj= h(
                      "h1",
                      {
                            attrs: {
                              id: this.myid   // <<==在render函数中用this.myid 访问
                            } 
	                        ,style: {
	                          color: 'red',
	                        }
                      }
                      
                      ,[  "333"
                        ,"4444"
                        ,h("br")
                        , h('button',{
                                 attrs: {type:"button" }
                                ,on   : {click: this.btClick} //<<===触发 methods 中的方法
                           },"测试按钮")
                      ]
                      
                    )
                    console.log(hObj);
                    return hObj;
                }
                ,methods:{
                    btClick(){
                        alert('button is click');
                    } 
                    
                }
                
        } 
	    
	
	
        new Vue({
            el : "#app",
            data : {
                message:"渲染函数demo"
            }
            ,components:{
                 comp1:comp1Config
                ,comp2:comp2Config
                ,comp3:comp3Config
            }
        });
    </script>
</body>
</html>
